<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>hello world</title>
		<style>
			div{margin-bottom: 12px;}
		</style>
		<script src="js/jquery-2.0.3.min.js"></script>
		<script src="js/audio.min.js"></script>
		<script type="text/javascript">
			function helloworld(){
					alert("hello world!")
				}
		   		document.addEventListener('plusready', function(){
		   			alert("welcome to Html5plus!");
		   		});
				
				
		   		function playAudio(i,index){
		   			console.log(index+":"+flags[index]);
		   			if(flags[index] == true){
		   				console.log(i);
			   			var audio = $(".audio1:eq("+(i)+")")[0];
			   			if(audio){
			   				audio.play();
			   				audio.addEventListener('ended', function () {
			   					if(audio.currentTime > 0){
			   						audio.currentTime = 0;
			   						audio.pause();
			   					}
								i++;
							   playAudio(i,index);
							}, false);
			   			}
		   			}
		   		}
		   		function initFlag(){
		   			var audios = $(".audio1");
		   			var flags = [];
		   			for(var i=0; i < audios.length; i++){
		   				var flag = {};
		   				flag[i] = false;
		   				flags.push(flag);
		   			}
		   			return flags;
		   		}
		   		var flags = initFlag();
		   		$(function(){
		   			$(".test").click(function(){
		   				$(".audio1").each(function(){
		   					if(!this.paused){
		   						this.pause();
		   					}
		   				});
		   				var audios = $(".audio1");
		   				var index = $(this).parent().index(".audio");
		   				flags = initFlag();
		   				flags[index] = true;
		   				(function(j){
		   					playAudio(j,j);
		   				})(index);
		   				
		   			});
		   		});
		</script>
		
	</head>

	<body>
		<div class="audio">
			<audio class="audio1" controls="controls" >
				<source src="12345.mp3" type="audio/mpeg" /> Your browser does not support the audio element.
			</audio>
			<input class="test" type="button" value="paly" loop="false" />
		</div>
		<div class="audio">
			<audio class="audio1" controls="controls" >
				<source src="06.mp3" type="audio/mpeg" /> Your browser does not support the audio element.
			</audio>
			<input class="test" type="button" value="paly" loop="false" />
		</div>
		<div class="audio">
			<audio class="audio1" controls="controls" >
				<source src="46.mp3" type="audio/mpeg" /> Your browser does not support the audio element.
			</audio>
			<input class="test" type="button" value="paly" loop="false" />
		</div>
		<div class="audio">
			<audio class="audio1" controls="controls" >
				<source src="06.mp3" type="audio/mpeg" /> Your browser does not support the audio element.
			</audio>
			<input class="test" type="button" value="paly" loop="false" />
		</div>
		<div class="audio">
			<audio class="audio1" controls="controls" >
				<source src="17.mp3" type="audio/mpeg" /> Your browser does not support the audio element.
			</audio>
			<input class="test" type="button" value="paly" loop="false" />
		</div>
		<div class="audio">
			<audio class="audio1" controls="controls" >
				<source src="06.mp3" type="audio/mpeg" /> Your browser does not support the audio element.
			</audio>
			<input class="test" type="button" value="paly" loop="false" />
		</div >
		<div class="audio">
			<audio class="audio1" controls="controls" >
				<source src="46.mp3" type="audio/mpeg" /> Your browser does not support the audio element.
			</audio>
			<input class="test" type="button" value="paly" loop="false" />
		</div>
		
		<!--<div>
			<audio class="audio1" controls="controls" >
				<source src="test.mp3" type="audio/mpeg" /> Your browser does not support the audio element.
			</audio>
			<input class="test" type="button" value="paly" />
		</div>
		
		<div>
			<audio class="audio1" controls="controls" >
				<source src="test.mp3" type="audio/mpeg" /> Your browser does not support the audio element.
			</audio>
			<input class="test" type="button" value="paly" />
		</div>-->
		
	</body>

</html>